<template>
  <a-modal v-model:open="isShow" title="编辑" @cancel="handleCancel" style="width: 900px">
    <a-form
        :model="trackFormState"
        :label-col="{span: 10}"
    >
      <a-row>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item ref="driverTel" label="司机电话" name="driverTel">
            <a-input v-model:value="trackFormState.driverTel" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item ref="licenseNum" label="货车车牌号" name="licenseNum">
            <a-input v-model:value="trackFormState.licenseNum" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item ref="sealCode" label="封条号" name="sealCode">
            <a-input v-model:value="trackFormState.sealCode" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="柜子图片">
            <uploadImage :action="action"  v-model:list="trackFormState.containerList" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="柜子情况">
            <uploadImage :action="action" v-model:list="trackFormState.conditionList" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="第一排照片">
            <uploadImage :action="action" v-model:list="trackFormState.firstRowList" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="中间照片">
            <uploadImage :action="action" v-model:list="trackFormState.middleContainerList" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="满柜照片">
            <uploadImage :action="action" v-model:list="trackFormState.fullContainerList" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="关半边门照片">
            <uploadImage :action="action" v-model:list="trackFormState.halfDoorList" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="装箱单照片">
            <uploadImage :action="action" v-model:list="trackFormState.packingListList" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="柜号照片">
            <uploadImage :action="action" v-model:list="trackFormState.containerNoList" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="8" :xxl="8" :md="12" :lg="12">
          <a-form-item label="封条照片">
            <uploadImage :action="action" v-model:list="trackFormState.sealList" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="btnLoading" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref, computed, defineProps,reactive, defineEmits,watch } from 'vue'
import {message} from "ant-design-vue";
import {editDetailShippingTrack, editShippingTrack} from "@/api/firstShipping/shippingMessage.js";
import {apiBaseUrl} from "@utils/service/index.js";
import uploadImage from "@/components/upload/uploadImg.vue"
const props = defineProps({
  openTrack:{
    type:Boolean,
  },
  trackInfo:{
    type:Object,
  },
  baseInfo: {
    type: Object,
  }
})
const action = ref(apiBaseUrl + 'sys/common/upload')
const trackFormState = ref({
  containerList:[],
  conditionList:[],
  firstRowList:[],
  middleContainerList:[],
  halfDoorList:[],
  packingListList:[],
  containerNoList:[],
  sealList:[],
  fullContainerList:[]
})

const emit = defineEmits(['close'])
const isShow = computed(()=>{
  return props.openTrack
})
const btnLoading = ref(false)
const handleCancel = () => {
  emit('close','track')
}
const handleOk = async () => {
  try{
    btnLoading.value = true
    handleUpload()
    const res = await editDetailShippingTrack(trackFormState.value)
    message.success('修改成功')
    emit('close','track')
  }catch (e){
    message.error(e)
  }finally {
    btnLoading.value = false
  }
}
watch(()=>isShow.value,(val)=>{
  if(val){
    trackFormState.value = {...props.trackInfo}
    for (let valueKey in trackFormState.value) {
      if(valueKey.includes('Img')){
        let str = valueKey.replace('Img','List')
        let arr = trackFormState.value[valueKey].split(',')
        trackFormState.value[str] = arr.map(item=>{
          return {
            url:item
          }
        })
      }
    }
    console.log(trackFormState.value)
  }
})
const handleUpload = () => {
    for (let valueKey in trackFormState.value) {
      if(valueKey.includes('List')){
        let str = valueKey.replace('List','Img')
        trackFormState.value[str] = ''
        trackFormState.value[valueKey].forEach(item=>{
          if(item.url){
            trackFormState.value[str] +=  item.url + ','
          }else if(item.response){
            trackFormState.value[str] += item.response.message + ','
          }
        })
        trackFormState.value[str] = trackFormState.value[str].substring(0, trackFormState.value[str].length - 1)
      }
    }
}
</script>
<style scoped>

</style>
